<template>
  <div
    class="cardBox"
    :style="{ backgroundColor: cardBox.bgc }"
  >
    <el-row style="font-size: 1.2rem; height: 20%">{{ cardBox.title }}</el-row>
    <el-row
      style="
        height: 80%;
        display: flex;
        flex-direction: column-reverse;
        flex-wrap: wrap;
        align-items: flex-end;
        align-content: stretch;
      "
    >
      <el-col
        :span="16"
        style="
          height: 60%;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          align-items: stretch;
        "
      >
        <el-row style="font-size: 2.5rem">{{ cardBox.num }}</el-row>
        <el-row v-if="cardBox.riseFall === null"></el-row>
        <el-row
          type="flex"
          justify="space-between"
          style="height: 40%"
          v-else
        >
          <el-col :span="6">较昨日</el-col>
          <el-col
            :span="2"
            :style="{ color: cardBox.riseFall == 1 ? 'red' : 'green' }"
            >{{ cardBox.differValue }}</el-col
          >
          <el-col :span="2"
            ><i
              :style="{ color: cardBox.riseFall == 1 ? 'red' : 'green' }"
              :class="cardBox.riseFall == 1 ? 'el-icon-top' : 'el-icon-bottom'"
            ></i
          ></el-col>
          <el-col :span="12"></el-col>
        </el-row>
        <el-row></el-row>
      </el-col>
      <el-col :span="8"
        ><i
          :class="cardBox.icon"
          style="font-size: 6rem; color: #44cef6"
        ></i
      ></el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // cardBox:{
      //     title: '卡片标题',
      //     num: '35',
      //     differValue:'10',
      //     riseFall:1,
      //     icon:'el-icon-data-line'
      // }
    }
  },
  props: ['cardBox'],
  mounted() {},

  methods: {},
}
</script>

<style lang="less" scoped>
.cardBox {
  width: 100%;
  height: 100%;
  padding: 5%;
  box-sizing: border-box;
  border-radius: 5px;
  // background-color: red;
  min-width: 200px;
  aspect-ratio: 3/1;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: space-between;
}
</style>
